<!DOCTYPE html>

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />

  <!-- Set the viewport width to device width for mobile -->
  <meta name="viewport" id="view" content="width=device-width minimum-scale=1, maximum-scale=1" />

  <title>TouchM :: Premium Multipurpose Responsive Theme</title>
  
  <!-- Included CSS Files (Compressed) -->
  <link rel="stylesheet" href="stylesheets/foundation.min.css">
  <link rel="stylesheet" href="stylesheets/app.css">
  <link rel="stylesheet" href="stylesheets/style1.css">
<link rel="stylesheet" href="stylesheets/color1.css">
  
  <!-- Plugins CSS -->
  <link href="plugins/titan/css/jquery.titanlighbox.css" rel="stylesheet" type="text/css">
  
  <!-- Google Fonts --> 
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'> 
 
  <!-- Included JS Files (Compressed) -->
  <script src="javascripts/jquery.js"></script>
  <script src="javascripts/foundation.min.js"></script>
  <script src="javascripts/modernizr.foundation.js"></script> 
    
  <!-- Slider Revolution JS FILES  -->
  <script type="text/javascript" src="plugins/slider-revolution/jquery.themepunch.plugins.min.js"></script>
  <script type="text/javascript" src="plugins/slider-revolution/jquery.themepunch.revolution.min.js"></script>
  
  <!-- Tooltips -->
  <script type="text/javascript" src="javascripts/jquery.tipsy.js"></script>
  
  <!-- CarouFredSel plugin -->
  <script type="text/javascript"  src="javascripts/jquery.carouFredSel-6.0.3-packed.js"></script>
  <!-- optionally include helper plugins -->
  <script type="text/javascript"  src="javascripts/jquery.touchSwipe.min.js"></script>
    
  <!-- Titan Lightbox -->
  <script type="text/javascript" src="plugins/titan/js/prettify.js"></script>
  <script type="text/javascript" src="plugins/titan/js/jquery.titanlighbox.js"></script>
  
   <!-- Isotope Portfolio -->
  <script type="text/javascript" src="javascripts/jquery.isotope.min.js"></script>
<script>

$(window).load(function(){
    
    var $container = $('#container');

    $container.isotope({
      itemSelector : '.element',
      // disable resizing
      resizable: false,
      // set columnWidth to a percentage of container width
      masonry: {
        columnWidth: $container.width() / 12
      },
     });
    
    // update columnWidth on window resize
    $(window).smartresize(function(){
      $container.isotope({
        // set columnWidth to a percentage of container width
        masonry: {
          columnWidth: $container.width() / 12
        }
      });
    });
      
    
      var $optionSets = $('#options .option-set'),
          $optionLinks = $optionSets.find('a');

      $optionLinks.click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');
  
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
          // changes in layout modes need extra logic
          changeLayoutMode( $this, options )
        } else {
          // otherwise, apply new options
          $container.isotope( options );
        }
        
        return false;
      });
    
  });
</script>
  
  <!-- Scripts Initialize -->
  <script src="javascripts/app-head.js"></script>
  

  <!-- IE Fix for HTML5 Tags -->
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  



</head>
<body onload="initialize()">
<!-- Region 1 Wrap -->

  <div class="container region1wrap">  
         
    <!-- Top Header -->
  	<div class="row top_header">
    
        <div class="six columns">
        
    				<ul class="link-list">
  						<li><a href="#">Order Now</a></li>
  						<li><a href="#">Pricing</a></li>
  						<li><a href="#">Site Map</a></li>
					</ul> 
  			
  				
    				<div class="login user-control">
            			Hello, <a href="#"> John Smith<span class="notification">4</span></a>
            		</div>


   	    </div>
        
        <div class="six columns">
        
        	<ul class="top_social">
  				<li><a class="has-tipsy" href="http://twitter.com/" title="Twitter"><img src="images/social/Twitter.png" alt="Twitter"></a></li>
  				<li><a class="has-tipsy" href="http://www.facebook.com/" title="Facebook"><img src="images/social/Facebook.png" alt="Facebook"></a>
  				<li><a class="has-tipsy" href="http://google.com/" title="Google"><img src="images/social/Google.png" alt="Google+"></a></li>
                <li><a class="has-tipsy" href="http://www.LinkedIn.com/" title="LinkedIn"><img src="images/social/LinkedIn.png" alt="LinkedIn"></a></li>
                <li><a class="has-tipsy" href="http://www.Flickr.com/" title="Flickr"><img src="images/social/Flickr.png" alt="Flickr"></a></li>
                <li><a class="has-tipsy" href="http://vimeo.com/" title="Vimeo"><img src="images/social/Vimeo.png" alt="Vimeo"></a></li>
  				<li><a class="has-tipsy" href="http://www.rss.com/" title="RSS"><img src="images/social/RSS.png" alt="RSS"></a></li>
			</ul>

		</div>
    
  	</div>
    <!-- End Top Header -->
    
  </div>
  
<!-- End Region 1 Wrap -->

<!-- Region 2 Wrap -->

<div class="container region2wrap">
  
	<div class="row">
    
    	<!-- Logo -->
            
    	<div class="three columns">

        	<a href="index.html" id="logo"><h1>Touch<span>M</span></h1></a>
        
  		</div>
        
        <!-- End Logo -->
        
        <!-- Main Navigation -->
        
        <div class="nine columns">

			<nav class="top-bar">
        
    			<ul>
      				<!-- Toggle Button Mobile -->
      				<li class="name">
        			<h1><a href="#"> Please select your page</a></h1>
      				</li>
      				<li class="toggle-topbar"><a href="#"></a></li>
                    <!-- End Toggle Button Mobile -->
    			</ul>



      			<section><!-- Nav Section -->
      			<ul class="right">
        
        			<li class="has-dropdown">
          				<a href="index.html">Home</a>
          				<ul class="dropdown">
            				<li><a href="index.html">Home Page - Default</a></li>
            				<li><a href="index-type1.html">Home Page Type 1</a></li>
                            <li><a href="index-type2.html">Home Page Type 2</a></li>
                            <li class="has-dropdown"><a href="#">TouchM Sliders</a>
                            	<ul class="dropdown">
            						<li><a href="index.html">Slider Revolution</a></li>
            						<li><a href="index-flexi.html">Flexislider</a></li>
                                    <li><a href="index-camera.html">Camera Slider</a></li>
                                </ul>
                            </li>
          				</ul>
        			</li>
        
        			<li class="has-dropdown">
        				<a  href="#">Features</a>
            			<ul class="dropdown">
            				<li><a href="about.html">About Us</a></li>
            				<li><a href="services.html">Services</a></li>
            				<li><a href="pricing.html">Pricing Tables</a></li>
            				<li><a href="shortcodes.html">Shortcodes</a></li>
            				<li><a href="notfound.html">404 Not Found</a></li>
            				<li><a href="under-construction.html">Under Construction</a></li>
            				<li class="has-dropdown"><a href="#">Third Navigation Level</a>
            					<ul class="dropdown">
            						<li><a href="#">This is a simple example</a></li>
            						<li><a href="#">Of the Third Level</a></li>
               					</ul>
            				</li>
            			</ul>        
        			</li>
        
        			<li class="has-dropdown">
          				<a href="#">Blog</a>
          					<ul class="dropdown">
                            	<li><a href="blog_sidebar_right.html">Blog Default</a></li>
                            	<li><a href="blog_type1.html">Blog Type 1</a></li>
                                <li><a href="blog_type2.html">Blog Type 2</a></li>         
            					<li><a href="blog_sidebar_right.html">Sidebar Right</a></li>
            					<li><a href="blog_sidebar_left.html">Sidebar Left</a></li>
            					<li><a href="blog_inner.html">Single Post</a></li>
          					</ul>
        			</li>
        
        			<li class="has-dropdown">
          				<a class="active" href="#">Portfolio</a>
          					<ul class="dropdown">             
            					<li><a href="portfolio_default.html">Portfolio Default (4 Columns)</a></li>         
            					<li><a href="portfolio_type1.html" class="">Portfolio 2 Columns</a></li>
            					<li><a href="portfolio_type2.html">Portfolio 3 Columns</a></li> 
                                <li><a href="portfolio_default.html">Portfolio 4 Columns</a></li>            
            					<li><a href="single-project.html">Single Project</a></li>
          					</ul>
        			</li>
        
        			<li><a href="contact.html">Contact</a></li>
        
      			</ul>
                </section><!-- End Nav Section -->

  			</nav>            
        
    	</div>
        
        <!-- End Main Navigation -->        
        
	</div>
    
</div>
  
<!-- End Region 2 Wrap -->

<!-- Region 3 Wrap -->

  <div class="container region3wrap">  
  
    
    <!-- Content Top -->  
  	<div class="row content_top">
        
    	<div class="nine columns">
       
			<ul class="breadcrumbs">
 				<li><a href="index.html">Home</a></li>
  				<li><a href="#">Pages</a></li>
  				<li class="current"><a href="#">Portfolio</a></li>
			</ul>

		</div>
        
        <div class="three columns">

			<div class="row">
 				<div class="twelve columns">
    				<div class="row collapse top_search">
      					<div class="ten mobile-three columns">
        					<input type="text" placeholder="Enter search terms" />
      					</div>
      					<div class="two mobile-one columns">
        					<a href="#" class="button icon-search"></a>
      					</div>
    				</div>
  				</div>
			</div>

		</div>
        
  	</div>
    <!-- End Content Top -->
    
  </div>
  
<!-- End Region 3 Wrap -->

<!-- Region 4 Wrap -->

  <div class="container region4wrap">
  
  	<div class="row maincontent">
    
    	<div class="twelve columns">
        	
        	<div class="page_title">
        
        		<div class="row">
            	
            		<div class="four columns">
        				<h1>Our Portfolio</h1>
            		</div>
            
           			<div class="eight columns">
            
            		<!-- Portfolio Navigation -->
            		<section id="options">
  
      					<ul id="filters" class="option-set right" data-option-key="filter">
        					<li><a href="#filter" data-option-value="*" class="button small selected">Show All</a></li>
        					<li><a href="#filter" data-option-value=".web" class="button small">Web Design</a></li>
        					<li><a href="#filter" data-option-value=".ill" class="button small">Illustration</a></li>
        					<li><a href="#filter" data-option-value=".logo" class="button small">Logo</a></li>
        					<li><a href="#filter" data-option-value=".video" class="button small">Video</a></li>
        					<li><a href="#filter" data-option-value=".print" class="button small">Print</a></li>
      					</ul>

	  				</section>
            		<!-- End Portfolio Navigation -->
            
            		</div>
            
            	</div>
                
        	</div>
        
        </div>
    
    	<!-- Portfolio Content -->      
		<div class="twelve columns">       
        
			<div class="row">
                
                <!-- Portfolio Content -->
                <div class="twelve columns">
                
                	<div class="row">
                    
                    	<div id="container" class="clickable variable-sizes clearfix">
     								   
    						<!-- Portfolio Item -->
                            <div class="four columns element web logo print">
                             
                             	<div class="portfolio-item">
                                
                                	<div class="portfolio-item-image image-overlay">    								
  	    	    						<a class="titan-lb" data-titan-group="gallery" href="images/works/1.jpg" title="Etiam ultrices mi vel libero hendrerit ultricies.Pellentesque lacinia ultrices ac imperdiet."><img src="images/works/1.jpg" alt="" />
                               				<span class="overlay-icon item-zoom"></span>
                               			</a>
                                    </div>
                                    
                                    <div class="portfolio-item-content">
                                    	<h5 class="title"><a href="single-project.html">Materialistic</a></h5> 
                                        <p>Illustration  / Web Design </p>
                                    </div>
                                    
                            	</div>
                                   	 
   							</div>
                            <!-- End Portfolio Item --> 
                            
                            <!-- Portfolio Item -->
                            <div class="four columns element web ill print">
                             
                             	<div class="portfolio-item">
                                
                                	<div class="portfolio-item-image image-overlay">    								
  	    	    						<a href="single-project.html"><img src="images/works/3.jpg" alt="" />
                               				<span class="overlay-icon item-link"></span>
                               			</a>
                                    </div>
                                    
                                    <div class="portfolio-item-content">
                                    	<h5 class="title"><a href="single-project.html">Materialistic</a></h5> 
                                        <p>Illustration  / Web Design </p>
                                    </div>
                                    
                            	</div>
                                   	 
   							</div>
                            <!-- End Portfolio Item -->
                            
                            <!-- Portfolio Item -->
                            <div class="four columns element ill logo">
                             
                             	<div class="portfolio-item">
                                
                                	<div class="portfolio-item-image image-overlay">    								
  	    	    						<a class="titan-lb" data-titan-group="gallery" href="images/works/2.jpg" title="Etiam ultrices mi vel libero hendrerit ultricies."><img src="images/works/2.jpg" alt="" />
                               				<span class="overlay-icon item-movie"></span>
                               			</a>
                                    </div>
                                    
                                    <div class="portfolio-item-content">
                                    	<h5 class="title"><a href="single-project.html">Materialistic</a></h5> 
                                        <p>Illustration  / Web Design </p>
                                    </div>
                                    
                            	</div>
                                   	 
   							</div>
                            <!-- End Portfolio Item -->
                            
                            <!-- Portfolio Item -->
                            <div class="four columns element logo print ill">
                             
                             	<div class="portfolio-item">
                                
                                	<div class="portfolio-item-image image-overlay">    								
  	    	    						<a class="titan-lb" data-titan-group="gallery" href="images/works/4.jpg" title="Etiam ultrices mi vel libero hendrerit ultricies."><img src="images/works/4.jpg" alt="" />
                               				<span class="overlay-icon item-image"></span>
                               			</a>
                                    </div>
                                    
                                    <div class="portfolio-item-content">
                                    	<h5 class="title"><a href="single-project.html">Materialistic</a></h5> 
                                        <p>Illustration  / Web Design </p>
                                    </div>
                                    
                            	</div>
                                   	 
   							</div>
                            <!-- End Portfolio Item -->
                            
                            <!-- Portfolio Item -->
                            <div class="four columns element ill">
                             
                             	<div class="portfolio-item">
                                
                                	<div class="portfolio-item-image image-overlay">    								
  	    	    						<a class="titan-lb" data-titan-group="gallery" href="images/works/5.jpg" title="Skyde - Travel far away to a old pirate space station."><img src="images/works/5.jpg" alt="" />
                               				<span class="overlay-icon item-zoom"></span>
                               			</a>
                                    </div>
                                    
                                    <div class="portfolio-item-content">
                                    	<h5 class="title"><a href="single-project.html">Materialistic</a></h5> 
                                        <p>Illustration  / Web Design </p>
                                    </div>
                                    
                            	</div>
                                   	 
   							</div>
                            <!-- End Portfolio Item -->
                            
                            <!-- Portfolio Item -->
                            <div class="four columns element web logo video">
                             
                             	<div class="portfolio-item">
                                
                                	<div class="portfolio-item-image image-overlay">    								
  	    	    						<a class="titan-lb" data-titan-group="gallery" href="images/works/7.jpg" title="Etiam ultrices mi vel libero hendrerit ultricies."><img src="images/works/7.jpg" alt="" />
                               				<span class="overlay-icon item-zoom"></span>
                               			</a>
                                    </div>
                                    
                                    <div class="portfolio-item-content">
                                    	<h5 class="title"><a href="single-project.html">Materialistic</a></h5> 
                                        <p>Illustration  / Web Design </p>
                                    </div>
                                    
                            	</div>
                                   	 
   							</div>
                            <!-- End Portfolio Item -->
                            
                            <!-- Portfolio Item -->
                            <div class="four columns element logo ill">
                             
                             	<div class="portfolio-item">
                                
                                	<div class="portfolio-item-image image-overlay">    								
  	    	    						<a class="titan-lb" data-titan-group="gallery" href="images/works/6.jpg" title="Skyde - Travel far away to a old pirate space station."><img src="images/works/6.jpg" alt="" />
                               				<span class="overlay-icon item-zoom"></span>
                               			</a>
                                    </div>
                                    
                                    <div class="portfolio-item-content">
                                    	<h5 class="title"><a href="single-project.html">Materialistic</a></h5> 
                                        <p>Illustration  / Web Design </p>
                                    </div>
                                    
                            	</div>
                                   	 
   							</div>
                            <!-- End Portfolio Item -->
                            
                            <!-- Portfolio Item -->
                            <div class="four columns element print logo">
                             
                             	<div class="portfolio-item">
                                
                                	<div class="portfolio-item-image image-overlay">    								
  	    	    						<a class="titan-lb" data-titan-group="gallery" href="images/works/8.jpg" title="Skyde - Travel far away to a old pirate space station."><img src="images/works/8.jpg" alt="" />
                               				<span class="overlay-icon item-zoom"></span>
                               			</a>
                                    </div>
                                    
                                    <div class="portfolio-item-content">
                                    	<h5 class="title"><a href="single-project.html">Materialistic</a></h5> 
                                        <p>Illustration  / Web Design </p>
                                    </div>
                                    
                            	</div>
                                   	 
   							</div>
                            <!-- End Portfolio Item -->
                            
                            <!-- Portfolio Item -->
                            <div class="four columns element video web logo">
                             
                             	<div class="portfolio-item">
                                
                                	<div class="portfolio-item-image image-overlay">    								
  	    	    						<a class="titan-lb" data-titan-group="gallery" href="images/works/1.jpg" title="Etiam ultrices mi vel libero hendrerit ultricies."><img src="images/works/1.jpg" alt="" />
                               				<span class="overlay-icon item-zoom"></span>
                               			</a>
                                    </div>
                                    
                                    <div class="portfolio-item-content">
                                    	<h5 class="title"><a href="single-project.html">Materialistic</a></h5> 
                                        <p>Illustration  / Web Design </p>
                                    </div>
                                    
                            	</div>
                                   	 
   							</div>
                            <!-- End Portfolio Item -->
                            
                            <!-- Portfolio Item -->
                            <div class="four columns element video web logo">
                             
                             	<div class="portfolio-item">
                                
                                	<div class="portfolio-item-image image-overlay">    								
  	    	    						<a class="titan-lb" data-titan-group="gallery" href="images/works/2.jpg" title="Etiam ultrices mi vel libero hendrerit ultricies."><img src="images/works/2.jpg" alt="" />
                               				<span class="overlay-icon item-zoom"></span>
                               			</a>
                                    </div>
                                    
                                    <div class="portfolio-item-content">
                                    	<h5 class="title"><a href="single-project.html">Materialistic</a></h5> 
                                        <p>Illustration  / Web Design </p>
                                    </div>
                                    
                            	</div>
                                   	 
   							</div>
                            <!-- End Portfolio Item -->
                            
                            <!-- Portfolio Item -->
                            <div class="four columns element video">
                             
                             	<div class="portfolio-item">
                                
                                	<div class="portfolio-item-image image-overlay">    								
  	    	    						<a class="titan-lb" data-titan-group="gallery" href="images/works/4.jpg" title="Etiam ultrices mi vel libero hendrerit ultricies."><img src="images/works/4.jpg" alt="" />
                               				<span class="overlay-icon item-zoom"></span>
                               			</a>
                                    </div>
                                    
                                    <div class="portfolio-item-content">
                                    	<h5 class="title"><a href="single-project.html">Materialistic</a></h5> 
                                        <p>Illustration  / Web Design </p>
                                    </div>
                                    
                            	</div>
                                   	 
   							</div>
                            <!-- End Portfolio Item -->
                            
                            <!-- Portfolio Item -->
                            <div class="four columns element web video">
                             
                             	<div class="portfolio-item">
                                
                                	<div class="portfolio-item-image image-overlay">    								
  	    	    						<a class="titan-lb" data-titan-group="gallery" href="images/works/3.jpg" title="Etiam ultrices mi vel libero hendrerit ultricies."><img src="images/works/3.jpg" alt="" />
                               				<span class="overlay-icon item-zoom"></span>
                               			</a>
                                    </div>
                                    
                                    <div class="portfolio-item-content">
                                    	<h5 class="title"><a href="single-project.html">Materialistic</a></h5> 
                                        <p>Illustration  / Web Design </p>
                                    </div>
                                    
                            	</div>
                                   	 
   							</div>
                            <!-- End Portfolio Item -->
                            
                            <!-- Portfolio Item -->
                            <div class="four columns element ill web">
                             
                             	<div class="portfolio-item">
                                
                                	<div class="portfolio-item-image image-overlay">    								
  	    	    						<a class="titan-lb" data-titan-group="gallery" href="images/works/13.jpg" title="Etiam ultrices mi vel libero hendrerit ultricies."><img src="images/works/13.jpg" alt="" />
                               				<span class="overlay-icon item-zoom"></span>
                               			</a>
                                    </div>
                                    
                                    <div class="portfolio-item-content">
                                    	<h5 class="title"><a href="single-project.html">Materialistic</a></h5> 
                                        <p>Illustration  / Web Design </p>
                                    </div>
                                    
                            	</div>
                                   	 
   							</div>
                            <!-- End Portfolio Item -->
                            
                            <!-- Portfolio Item -->
                            <div class="four columns element video logo">
                             
                             	<div class="portfolio-item">
                                
                                	<div class="portfolio-item-image image-overlay">    								
  	    	    						<a class="titan-lb" data-titan-group="gallery" href="images/works/14.jpg" title="Skyde - Travel far away to a old pirate space station."><img src="images/works/14.jpg" alt="" />
                               				<span class="overlay-icon item-zoom"></span>
                               			</a>
                                    </div>
                                    
                                    <div class="portfolio-item-content">
                                    	<h5 class="title"><a href="single-project.html">Materialistic</a></h5> 
                                        <p>Illustration  / Web Design </p>
                                    </div>
                                    
                            	</div>
                                   	 
   							</div>
                            <!-- End Portfolio Item -->
                            
                            <!-- Portfolio Item -->
                            <div class="four columns element print">
                             
                             	<div class="portfolio-item">
                                
                                	<div class="portfolio-item-image image-overlay">    								
  	    	    						<a class="titan-lb" data-titan-group="gallery" href="images/works/6.jpg" title="Skyde - Travel far away to a old pirate space station."><img src="images/works/6.jpg" alt="" />
                               				<span class="overlay-icon item-zoom"></span>
                               			</a>
                                    </div>
                                    
                                    <div class="portfolio-item-content">
                                    	<h5 class="title"><a href="single-project.html">Materialistic</a></h5> 
                                        <p>Illustration  / Web Design </p>
                                    </div>
                                    
                            	</div>
                                   	 
   							</div>
                            <!-- End Portfolio Item -->
                            
                            <!-- Portfolio Item -->
                            <div class="four columns element print">
                             
                             	<div class="portfolio-item">
                                
                                	<div class="portfolio-item-image image-overlay">    								
  	    	    						<a class="titan-lb" data-titan-group="gallery" href="images/works/2.jpg" title="Skyde - Travel far away to a old pirate space station."><img src="images/works/2.jpg" alt="" />
                               				<span class="overlay-icon item-zoom"></span>
                               			</a>
                                    </div>
                                    
                                    <div class="portfolio-item-content">
                                    	<h5 class="title"><a href="single-project.html">Materialistic</a></h5> 
                                        <p>Illustration  / Web Design </p>
                                    </div>
                                    
                            	</div>
                                   	 
   							</div>
                            <!-- End Portfolio Item -->       
                                                           
						</div>
                                      
                    </div>
                
                </div>
                <!-- End Portfolio Content -->
            
            </div>
		            
		</div>
        <!-- End Portfolio Content -->
                               
  	</div>
    
  </div>
  
<!-- End Region 4 Wrap -->

<!-- Region 9 Wrap -->

  <div class="container region9wrap">
  
  	 <!-- Bottom Content -->
    <div class="row content_bottom">
    
    	<!-- // // // // // // // // // // -->
        
    	<div class="eight columns">
       
			<h2>Sign up for our newsletter</h2>
            <p>Keep up-to-date with the latest news and updates by subscribing to our newsletter.</p>
            
		</div>
        
        <!-- // // // // // // // // // // -->
        
        <div class="four columns">
			<div class="row collapse newsletter-input">
				<div class="eight mobile-three columns">
					<input type="text" placeholder="Enter your email address" />
				</div>
				<div class="four mobile-one columns">
					<a href="#" class="button expand">Subscribe</a>
				</div>
			</div>
		</div>
        
        <!-- // // // // // // // // // // -->        
        
  	</div>
    <!-- End Bottom Content -->
    
    <!-- Footer -->  
  	<div class="row footer">
        
        <!-- // // // // // // // // // // -->
        
        <div class="four columns">
        
        	<h4>About Us</h4>
        	<p>We say what we do, we do what we say, and we're looking forward to prove it to you.</p>
      		<ul class="vcard">
                <li class="address">001 Some Street. Los Angeles, CA, 12345. USA</li>
				<li class="tel"><a href="1234567890">(123) 456-7890</a></li>
                <li class="email"><a href="office@TouchM.com">office@TouchM.com</a></li>
			</ul>

   	    </div>
        
        <!-- // // // // // // // // // // -->
        
        <div class="four columns">
        
        	<h4>Latest Posts</h4>
			
            <ul class="footer-list">
            	<li><a href="#">Mauris pellentesque laoreet lacus non condimentum.</a></li>
  				<li><a href="#">Vestibulum vel diam orci vitae.</a></li>
                <li><a href="#">Suspendisse elementum magna sed lorem faucibus eleifend.</a></li>
  				<li><a href="#">Phasellus placerat convallis congue.</a></li>
  				<li><a href="#">Etiam vehicula lacus fringilla lacus tristique pretium.</a></li>
			</ul>  

   	    </div>
        
        <!-- // // // // // // // // // // -->
        
        <div class="four columns">
        
            <h4>Latest Tweets</h4>
            
			<ul class="footer-list twitter">
  				<li>@4grafx  Go Mobile - 'Quickr – WordPress Responsive HTML 5 Premium Template'<a href="#">goo.gl/1HQER</a><a class="twit-date">28 minutes ago</a></li>
            	<li>@4grafx  20+ Enhancing CSS3 tools and generators <a href="#">goo.gl/1HQER</a><a class="twit-date">2 days ago</a></li>   
			</ul> 

   	    </div>
        
        <!-- // // // // // // // // // // -->
        
  	</div>
    <!-- End Footer -->
    
  </div>
  
<!-- End Region 9 Wrap -->

<!-- Region 10 Wrap -->

  <div class="container region10wrap">
  
  	<div class="row footer_bottom">
       
        <!-- Bottom -->
        
        <!-- // // // // // // // // // // -->
        
        <div class="six columns">
        
        	<p class="copyright">© 2012 TouchM by 4GraFx. All rights reserved</p>

   	    </div>
        
        <!-- // // // // // // // // // // -->
        
        <div class="six columns">
        
			<ul class="link-list">
  				<li><a href="#">Home</a></li>
  				<li><a href="#">Pages</a></li>
  				<li><a href="#">Blog</a></li>
  				<li><a href="#">Porfolio</a></li>
  				<li><a href="#">Contact</a></li>
			</ul>

   	    </div>
        
        <!-- // // // // // // // // // // -->
        
        <!-- Bottom -->
        
  	</div>
  </div>
  
<!-- End Region 10 Wrap -->

  
  
  <!-- Included JS Files (Uncompressed) -->
  <!--
  
  <script src="javascripts/jquery.js"></script>
  
  <script src="javascripts/jquery.foundation.mediaQueryToggle.js"></script>
  
  <script src="javascripts/jquery.foundation.forms.js"></script>
  
  <script src="javascripts/jquery.foundation.reveal.js"></script>
  
  <script src="javascripts/jquery.foundation.navigation.js"></script>
  
  <script src="javascripts/jquery.foundation.buttons.js"></script>
  
  <script src="javascripts/jquery.foundation.tabs.js"></script>
  
  <script src="javascripts/jquery.foundation.tooltips.js"></script>
  
  <script src="javascripts/jquery.foundation.accordion.js"></script>
  
  <script src="javascripts/jquery.placeholder.js"></script>
  
  <script src="javascripts/jquery.foundation.alerts.js"></script>
  
  <script src="javascripts/jquery.foundation.topbar.js"></script>
  
  -->
  
<!-- Back To Top -->
  <a href="#" class="scrollup">Scroll</a>
<!-- End Back To Top -->

<!-- FlexSlider -->
  <script defer src="plugins/flexislider/jquery.flexslider.js"></script>
  
<!-- Initialize JS Plugins -->
  <script src="javascripts/app.js"></script>
  
</body>
</html>
